<template>
  <a-layout id="app">
    <!-- 侧边导航 -->
    <a-layout-sider :trigger="null" collapsible v-model="collapsed" breakpoint="lg" collapsedWidth="80" width="256" class="layout-sider">
      <div class="logo-warp">
        <img v-show="!collapsed" class="logo" src="./assets/images/layout/logo.png" />
      </div>
      <side-menu />
    </a-layout-sider>
    <a-layout>
      <!-- 顶部 -->
      <a-layout-header class="layout-header">
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="handleCollapsed" />
        <Header />
      </a-layout-header>
      <!-- 内容 -->
      <a-layout-content class="layout-content">
        <router-view></router-view>
      </a-layout-content>
      <!-- 页脚 -->
      <a-layout-footer class="layout-footer">©2020 康颜出品</a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
  import SideMenu from './components/layout/sideMenu'
  import Header from './components/layout/header'
  export default {
    name: 'App',
    components: {
      SideMenu,
      Header
    },
    data() {
      return {
        collapsed: false,
      }
    },
    methods: {
      handleCollapsed() {
        this.collapsed = !this.collapsed
      }
    }
  }
</script>

<style lang="less">
  #app {
    height: 100%;
    .layout-sider {
      .logo-warp {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 64px;
        background: #002140;
        .logo {
          display: block;
          width: 160px;
          height: auto;
        }
      }
    }
    .layout-header {
      display: flex;
      align-items: center;
      background: #fff; 
      padding: 0;
      .trigger {
        font-size: 18px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
        &:hover {
          color: #1890ff;
        }
      }
    }
    .layout-content {
      margin: 24px 16px;
      padding: 24px;
      background: #fff;
      min-height: 280px;
    }
    .layout-footer {
      text-align: center;
    }
  }
</style>